<!--
   * @author  tanyuze
   标签管理
-->
/*eslint-enable*/
<template>
  <el-container id="label-index">
    <split-pane split="vertical" :min-percent="0" :default-percent="20">
      <template slot="paneL">
        <div class="treeBox leftWrap">
          <el-tree
            ref="qytree"
            key="lodTree"
            v-loading="treeLoading"
            :data="treeData"
            :props="defaultProps"
            :expand-on-click-node="false"
            class="dictTree"
            highlight-current
            :default-expanded-keys="[treeData.length > 0 && treeData[0].id]"
            node-key="id"
            @node-click="handleNodeClick"
          >
            <span slot-scope="{ node }" class="custom-tree-node">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </template>
      <template slot="paneR">
        <el-main class="user-main">
          <!--          <div v-if="!isShow" class="ts-con">
            <div class="ts">
              <i class="el-icon-info" />
              <span v-html="showMsg" />
            </div>
          </div>-->
          <!--          v-else-->
          <div id="enterprise-usermanage">
            <el-collapse-transition>
              <div v-show="searchshow" class="course-search merge">
                <span class="svg-container">
                  <svg-icon icon-class="search" />
                </span>
                <el-input v-model.trim="listQuery.name" placeholder="请输入名称搜索" class="search-input" />
                <div class="course-search-btn">
                  <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
                  <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
                </div>
              </div>
            </el-collapse-transition>
            <div class="btn-container">
              <div class="btn-container-title">
                <span>标签管理</span>
                <span v-if="currentNode.name">
                  <span v-if="breadList.length > 0">,当前选择</span>
                  <span v-if="breadList.length" class="btn-container-title-select" :title="breadList.join('>')">{{ breadList.join('>') }}</span>
                </span>
              </div>
              <div class="btn-container-btns">
                <el-button
                  v-permission="'personmanageInsert'"
                  class="filter-item"
                  style="margin-left: 10px;"
                  @click="handleCreate"
                >新建标签
                </el-button>
                <el-button class="filter-item" style="margin-left: 10px;" @click="handleDeletes">批量删除 </el-button>

                <!-- <el-button style="margin-left: 10px;" @click="handleSelectPlatform">选取平台标签 </el-button> -->
              </div>
            </div>
            <div class="table">
              <el-table
                ref="rolemantable"
                v-loading="listLoading"
                :data="list"
                class="tableScope"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" :selectable="selectable" />
                <el-table-column prop="name" label="标签名称" width="150px" />
                <el-table-column prop="labelTypeName" label="类型" width="150px" />
                <el-table-column prop="showTypeName" label="形式" width="150px" />
                <el-table-column prop="hitParam" label="命中值" width="150px" />
                <el-table-column prop="explains" label="说明" show-overflow-tooltip />
                <el-table-column prop="statusName" label="状态" show-overflow-tooltip />
                <el-table-column label="操作" fixed="right" min-width="120px" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handlePublish(scope.row)">{{ scope.row.status === 'ZT01' ? '禁用' : '启用' }}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="btn-pagion fix">
              <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
            </div>
          </div>
        </el-main>
      </template>
    </split-pane>
  </el-container>
</template>

<script>
import splitPane from 'vue-splitpane'
import { fetchList, queryPage, del, updateStatus, dels } from '../api/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import permission from '@/directive/permission/index.js' // 权限判断指令
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'Enterpriseuser',
  components: {
    Pagination,
    splitPane
  },
  directives: {
    permission,
    elDragDialog
  },
  data() {
    return {
      isShow: false,
      issearchtree: false,
      showMsg: '单击左侧菜单项进行维护',
      treeLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        name: ''
      },
      searchshow: true,
      search: {
        userName: ''
      },
      list: [],
      treeData: [],
      treeName: '',
      total: 0,
      multipleSelection: [],
      defaultProps: {
        children: 'children',
        label: 'classifyName'
      },
      checkedData: [],
      listLoading: false,
      breadList: [],
      currentNode: {},
      currentClickData: {},
      selectOrgTree: [{}],
      dict: {},
      view: '/API-DOCUMENT/document/file/download?id='
    }
  },
  created() {
    this.getTreeData()
    for (const key in this.dict) {
      this.getDict(key)
    }
  },
  methods: {
    selectable(row, index) {
      return !row.isForce
    },
    handleSelectPlatform() {
      this.$router.push({ path: '/contentRepository/labelLibrary/SelectCourse4platform', query: {}})
    },
    /**
     * 启用/禁用
     */
    handlePublish(row) {
      this.$confirm(row.status === 'ZT01' ? '确认禁用？' : '确认启用？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const configObj = {
            status: row.status === 'ZT01' ? 'ZT02' : 'ZT01',
            id: row.id
          }
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          updateStatus(configObj).then((res) => {
            loading.close()
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getList()
            }
          })
        })
        .catch(() => {})
    },
    /**
     * 获取当前树节点和其父级节点
     */
    getTreeNode(Node) {
      if (Node) {
        if (Node.label !== undefined) {
          this.breadList.unshift(Node.label) // 在数组头部添加元素
          this.getTreeNode(Node.parent) // 递归
        }
      }
    },
    // 点击树
    handleNodeClick(data, Node) {
      console.log(data, 222)
      this.breadList = []
      // this.getTreeNode(Node)
      this.currentNode = Object.assign({}, data)
      this.selectOrgTree = [
        {
          orgId: data.id,
          name: data.name
        }
      ]
      this.resettingBtn()
      this.isShow = true
    },
    getTreeData() {
      this.treeLoading = true
      return new Promise((resolve, reject) => {
        fetchList({ classifyType: 'FLLX_BQ' })
          .then((response) => {
            this.treeLoading = false
            this.treeData = response.data.data
            if (this.treeData.length > 0) {
              this.$nextTick(() => {
                this.$refs.qytree.setCurrentKey(this.treeData[0].id)
                this.$refs.qytree.setCurrentKey(this.treeData[0].id)
                const node = this.$refs.qytree.getCheckedNodes()
                this.handleNodeClick(this.treeData[0], node)
              })
            }
          })
          .catch((error) => {
            reject(error)
            this.treeLoading = false
          })
      })
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        classifyId: this.selectOrgTree[0].orgId || '',
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      if (this.searchshow) {
        query['name'] = this.listQuery.name
      }
      return new Promise((resolve, reject) => {
        queryPage(query)
          .then((response) => {
            this.list = response.data.data.rows
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch((error) => {
            reject(error)
            this.listLoading = false
          })
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resettingBtn() {
      this.listQuery.name = ''
      for (const i in this.search) {
        if (this.search['' + i + ''] instanceof Array) {
          this.search['' + i + ''] = []
        } else {
          this.search['' + i + ''] = ''
        }
      }
      this.listQuery.page = 1
      this.getList()
    },

    handleDeletes() {
      const arrid = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item) => {
          arrid.push(item.id)
        })
        const ids = arrid.join(',')
        this.$confirm('此操作将永久删除所选数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.deletes(ids)
          })
          .catch(() => {})
      } else {
        this.$message({
          message: '请选择需要删除的数据！',
          type: 'warning'
        })
      }
    },
    deletes(ids) {
      dels({ ids: ids }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
        this.getList()
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteLabel(row.id)
        })
        .catch(() => {})
    },
    deleteLabel(id) {
      del({ id: id }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
        this.getList()
      })
    },
    // 点击新增标签
    handleCreate() {
      this.$router.push({ path: this.$filterPath('styleManage'), query: { i: this.selectOrgTree[0].orgId, type: 'c' }})
    },
    handleUpdate(row) {
      console.log(row, 444)
      this.$router.push({ path: this.$filterPath('styleManage'), query: { i: row.id, type: 'u' }})
    },
    handleSelectionChange(arr) {
      this.multipleSelection = arr
    }
  }
}
</script>
<style lang="scss" type="text/scss">
// eslint-disable-next-line

$dark_gray: #bfced6;
#label-index {
  height: calc(100vh - 60px);
  padding: 0;
  overflow-y: hidden;

  .vue-splitter-container {
    width: 100%;
    overflow: hidden;
  }

  .treeBox {
    padding: 10px;
    margin-right: 0;
    background: #ffffff;
    height: 100%;
    background: #fff;
    overflow-y: auto;

    .search-tree-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tree-filter {
        padding: 10px 18px;
      }
    }
  }

  .leftWrap {
    background: #fff;

    padding: 10px;

    .search-tree-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tree-filter {
        padding: 10px 18px;
      }
    }

    .el-tree-node__content {
      margin-top: 10px;
    }

    .tag {
      font-size: 12px;
      border-radius: 4px;
      padding: 2px 4px;
      color: #fff;

      &.gh {
        color: #ff7474;
        border: 1px solid #ff7474;
      }

      &.qy {
        color: #2fbcfb;
        border: 1px solid #2fbcfb;
      }

      &.bm {
        color: #ffa11c;
        border: 1px solid #ffa11c;
      }
    }

    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    .el-icon-caret-right:before {
      content: '\E7A0';
      font-size: 14px;
    }

    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      content: '\E7A2';
      font-size: 14px;
    }
  }

  .user-main {
    height: 100%;
    background: #fff;
    overflow-y: auto;
    padding: 10px;
    position: relative;

    .ts-con {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background: white;

      .ts {
        line-height: 30px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -15px;
        margin-left: -110px;
        width: 210px;
        text-align: center;
        background: white;
        border-radius: 2px;
        box-shadow: 1px 1px 5px #e0dbdb;
        font-size: 14px;
        font-family: Microsoft Yahei In-Bold, Microsoft Yahei, Apple LiGothic Medium;
        color: #222222;
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }

    .upPassword {
      .hide {
        display: inline-block;
        width: 17px;
        height: 17px;
        //background-image: url('../images/hide.png');
        background-size: 100%;
        margin-top: 10px;
        cursor: pointer;
        margin-right: 5px;
      }

      .show {
        display: inline-block;
        width: 17px;
        height: 17px;
        //background-image: url('../images/show.png');
        background-size: 100%;
        margin-top: 10px;
        cursor: pointer;
        margin-right: 5px;
      }
    }
  }
}

#enterprise-usermanage {
  background-color: #ffffff;
  height: 100%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  padding: 10px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .course-search {
    background-color: #fff;
    padding: 0 10px;

    .svg-container {
      padding: 0 5px 0 10px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;

      &_login {
        font-size: 10px;
      }
    }

    .search-input {
      width: 40%;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }

      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;

        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }

    .course-search-btn {
      display: inline-block;
      float: right;

      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }

      .course-search-more {
        font-size: 14px;
        font-weight: 500;
        @include font-color($mainColor);
        cursor: pointer;
        margin-left: 10px;
      }
    }

    &.merge {
      height: 50px;
      line-height: 50px;
    }

    &.separate {
      .course-search-inner {
        padding-top: 10px;

        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }

          .el-checkbox__label {
            font-weight: 400;
          }

          .el-input {
            position: relative;

            .el-input__inner {
              border: none;
              padding: 0;
            }

            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }

      .course-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }

  .btn-container {
    display: flex;
    height: 36px;
    line-height: 36px;
    margin-top: 15px;
    margin-bottom: 15px;

    .btn-container-title {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      .btn-container-title-select {
        @include font-color($mainColor);
      }
    }
  }

  .el-table {
    height: calc(100% - 40px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .dataForm {
    .el-select {
      width: 100%;
    }
  }

  .upload-model {
    text-align: center;
  }
  .image-preview .el-dialog__body {
    text-align: center;
    .image-box {
      width: 200px;
      height: 80px;
      border: 2px dashed #ff9f91;
      border-radius: 5px;
    }
  }
}
</style>
